<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <meta name="viewport" content="width=device-width;">
    <base href="#" target="">
    <link rel="stylesheet" type="text/css" href="../src/css/style.css">
    <link rel="stylesheet" type="text/css" href="../src/css/grid.css">
    <link rel="stylesheet" type="text/css" href="../src/css/nav-bar.css">
    <link rel="stylesheet" type="text/css" href="../src/css/blog.css">
    <script src="../src/js/blog.js"></script>
    <title>index</title>
</head>

<body>
    <div class="container">
        <div class="row margin-top10 margin-bottom10">
            <div class="span12">
                <span class="font-larger" style="display: block; margin: 10px 0px;">胡 的博客</span>
            </div>
        </div>
        <div class="row">
            <div class="span12">
                <div class="nav-bar bg-shadow">
                    <ul>
                        <li><a id="home" onclick="switchPanel('blog-list')" href="">主页</a></li>
                        <li><a id="blog" onclick="switchPanel('blog-list')" href="">日志</a></li>
                        <li><a href="">相册</a></li>
                        <li><a href="">好友</a></li>
                        <li><a href="">留言板</a></li>
                        <li><a href="">个人档</a></li>
                    </ul>
                </div>
            </div>
        </div>
        </br>
        <div class="row">
            <div class="span3">
                <div class="row bg-shadow-light">
                    <div class="row">
                        <div class="span12">
                            <div class="margin-top10 margin-bottom10">
                                头像
                            </div>
                            <img class="img-myself" src="../src/image/myself.jpg" alt="">
                        </div>
                    </div>
                    <div class="row">
                        <div class="span6">
                            <div class="margin-top10 margin-bottom10">照片</div>
                            <div class="margin-top10 margin-bottom10">
                                <a href="">256</a>
                            </div>
                        </div>
                        <div class="span6">
                            <div class="margin-top10 margin-bottom10">日志</div>
                            <div class="margin-top10 margin-bottom10">
                                <a href="">122</a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="span12">
                            <div class="margin-top10 margin-bottom10">最近访客</div>
                            <div class="row font-gray">
                                <div class="row">
                                    <div class="span4">王老师</div>
                                    <div class="span4">宋老师</div>
                                    <div class="span4">任老师</div>
                                </div>
                                <div class="row">
                                    <div class="span4">胡刚</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="span9">
                <div class="row bg-shadow-light">
                    <div id="blog-list" class="row">
                        <div class="span12">
                            <div class="margin-top10 margin-bottom10">
                                我的日志                                
                            </div>
                            <div class="all-blog">
                                <div class="row">
                                    <div class="span12 font-gray">
                                        <div class="row blog-list margin-bottom10">
                                            <div class="title">
                                                <a class="blog-detail" onclick="switchPanel('blog-detail')" href="">
                                                    <h2>日志01</h2>                                                    
                                                </a>
                                            </div>
                                            <div class="desc">
                                                <p>
                                                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, repudiandae.</span>
                                                    <span>Mollitia sunt laborum velit. Ipsum, culpa maiores saepe eveniet facere?</span>
                                                    <span>Neque iure repellat quae accusamus quas aut commodi, deleniti perspiciatis!</span>
                                                    <span>Fugiat, nisi, pariatur! Minima voluptatibus, quisquam provident, voluptate quae esse.</span>
                                                </p>
                                            </div>
                                            <div class="nav">
                                                <ul>
                                                    <li><a href="">2016-4-24</a></li>
                                                    <li><a class="blog-detail" onclick="switchPanel('blog-detail')" href="">查看全文</a></li>
                                                    <li><a href="">阅读(198)</a></li>
                                                    <li><a href="">评论(40)</a></li>
                                                    <li><a href="">编辑</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="row blog-list margin-bottom10">
                                            <div class="title">
                                                <a href="">
                                                    <h2>日志02</h2>                                                    
                                                </a>
                                            </div>
                                            <div class="desc">
                                                <p>
                                                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, repudiandae.</span>
                                                    <span>Mollitia sunt laborum velit. Ipsum, culpa maiores saepe eveniet facere?</span>
                                                    <span>Neque iure repellat quae accusamus quas aut commodi, deleniti perspiciatis!</span>
                                                    <span>Fugiat, nisi, pariatur! Minima voluptatibus, quisquam provident, voluptate quae esse.</span>
                                                </p>
                                            </div>
                                            <div class="nav">
                                                <ul>
                                                    <li><a href="">2016-4-24</a></li>
                                                    <li><a href="">查看全文</a></li>
                                                    <li><a href="">阅读(198)</a></li>
                                                    <li><a href="">评论(40)</a></li>
                                                    <li><a href="">编辑</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="row blog-list margin-bottom10">
                                            <div class="title">
                                                <a href="">
                                                    <h2>日志03</h2>                                                    
                                                </a>
                                            </div>
                                            <div class=" desc">
                                                <p>
                                                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, repudiandae.</span>
                                                    <span>Mollitia sunt laborum velit. Ipsum, culpa maiores saepe eveniet facere?</span>
                                                    <span>Neque iure repellat quae accusamus quas aut commodi, deleniti perspiciatis!</span>
                                                    <span>Fugiat, nisi, pariatur! Minima voluptatibus, quisquam provident, voluptate quae esse.</span>
                                                </p>
                                            </div>
                                            <div class="nav">
                                                <ul>
                                                    <li><a href="">2016-4-24</a></li>
                                                    <li><a href="">查看全文</a></li>
                                                    <li><a href="">阅读(198)</a></li>
                                                    <li><a href="">评论(40)</a></li>
                                                    <li><a href="">编辑</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="row blog-list margin-bottom10">
                                            <div class="title">
                                                <a href="">
                                                    <h2>日志04</h2>                                                    
                                                </a>
                                            </div>
                                            <div class=" desc">
                                                <p>
                                                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, repudiandae.</span>
                                                    <span>Mollitia sunt laborum velit. Ipsum, culpa maiores saepe eveniet facere?</span>
                                                    <span>Neque iure repellat quae accusamus quas aut commodi, deleniti perspiciatis!</span>
                                                    <span>Fugiat, nisi, pariatur! Minima voluptatibus, quisquam provident, voluptate quae esse.</span>
                                                </p>
                                            </div>
                                            <div class="nav">
                                                <ul>
                                                    <li><a href="">2016-4-24</a></li>
                                                    <li><a href="">查看全文</a></li>
                                                    <li><a href="">阅读(198)</a></li>
                                                    <li><a href="">评论(40)</a></li>
                                                    <li><a href="">编辑</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="row blog-list margin-bottom10">
                                            <div class="title">
                                                <a href="">
                                                    <h2>日志05</h2>                                                    
                                                </a>
                                            </div>
                                            <div class=" desc">
                                                <p>
                                                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, repudiandae.</span>
                                                    <span>Mollitia sunt laborum velit. Ipsum, culpa maiores saepe eveniet facere?</span>
                                                    <span>Neque iure repellat quae accusamus quas aut commodi, deleniti perspiciatis!</span>
                                                    <span>Fugiat, nisi, pariatur! Minima voluptatibus, quisquam provident, voluptate quae esse.</span>
                                                </p>
                                            </div>
                                            <div class="nav">
                                                <ul>
                                                    <li><a href="">2016-4-24</a></li>
                                                    <li><a href="">查看全文</a></li>
                                                    <li><a href="">阅读(198)</a></li>
                                                    <li><a href="">评论(40)</a></li>
                                                    <li><a href="">编辑</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end of blog list-->
                    <div id="blog-detail">
                        <div class="span12">
                            <div class="blog">
                                <span class="title">日志01</span>
                                <div class="nav">
                                    <ul>
                                        <li><a href="">2016-4-24</a></li>
                                        <li><a href="">查看全文</a></li>
                                        <li><a href="">阅读(198)</a></li>
                                        <li><a href="">评论(40)</a></li>
                                        <li><a href="">编辑</a></li>
                                    </ul>
                                </div>
                                <p class="content">
                                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, fugit?</span>
                                    <span>Enim et eligendi atque tempora eum commodi velit. Quam, asperiores!</span>
                                    <span>Dolor illo est ex maiores dolores adipisci deleniti, optio sit!</span>
                                    <span>Doloremque, delectus. Inventore temporibus quis tempora quam quas tenetur possimus!</span>
                                    <span>Culpa illum, quibusdam fuga iusto rerum laudantium quos praesentium mollitia.</span>
                                    <img class="img" src="../src/image/blog-img01.jpg" alt="">
                                    <span>Magni, neque molestiae nobis impedit culpa vitae hic necessitatibus incidunt!</span>
                                    <span>Aliquid laboriosam eum similique id quis eligendi, exercitationem impedit iure!</span>
                                    <span>Culpa odit similique ratione temporibus molestiae iure sed nisi, ipsum.</span>
                                    <span>Asperiores quae assumenda sint qui, magnam molestiae aspernatur aut, ad.</span>
                                    <span>A commodi dignissimos, pariatur eius voluptatum ullam enim quaerat rerum.</span>
                                    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, fugit?</span>
                                    <span>Enim et eligendi atque tempora eum commodi velit. Quam, asperiores!</span>
                                    <span>Dolor illo est ex maiores dolores adipisci deleniti, optio sit!</span>
                                    <span>Doloremque, delectus. Inventore temporibus quis tempora quam quas tenetur possimus!</span>
                                    <span>Culpa illum, quibusdam fuga iusto rerum laudantium quos praesentium mollitia.</span>
                                </p>
                                <div class="nav">
                                    <ul>
                                        <li><a href="">上一篇</a></li>
                                        <li><a href="">下一篇</a></li>
                                    </ul>
                                </div>
                                <div class="margin-bottom40"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- end of span9 -->
        </div>
    </div>
</body>